.box{
    flex-shrink: 0;
    position: absolute;
    min-width: 200px;
    height: 60px;

    top: calc(100vh - 60px);
    transition: all 0s;
    background-color: rgba(255, 255, 255, 0.317);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 5px;
    animation-name: dockboth;
    animation-duration:0.5s;
    animation-delay: 1s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    .border{
        width: 100%;
        height: 50%;
        // background-color: white;
        position: absolute;
        top: -50%;
        // border-radius: 10px;
        // background-color: rgba(255, 255, 255, 0.628);
        // backdrop-filter: blur(20px);
    }
   
 
}

@keyframes dockboth {
    0%{
        transform: translateY(200%);
    }
    100%{
        transform: translateY(0%);
    }
}